<div id="app">
    <admin-page-header back>
        <bi-button type="primary" @click="save">保存</bi-button>
     </admin-page-header>
     <div class="container">
        <bi-form ref="form">
            <div class="row g-2">
                <div class="col-12">
                    <bi-card title="页面信息">
                        <bi-form-item label="名称" >
                            <bi-input v-model="form.title" placeholder="请输入页面名称" required></bi-input>
                        </bi-form-item>

                        <bi-form-item label="路由链接" >
                            <web-route  v-model="form.route" :link="false" v-model:type="form.route_type"  :parent-part="form.parent_id" ></web-route>
                        </bi-form-item>
 
                        <bi-form-item label="模板" v-if="form.route_type!='link'" >
                            <web-template v-model="form.template" required  ></web-template>
                        </bi-form-item>

                        <bi-form-item label="模型" >
                            <web-model v-model="form.model_id" type="page" ></web-model>
                        </bi-form-item>

                        <bi-form-item label="请求参数">
                            <bi-list :data="form.request" @add="addOption" @del="delOption" v-slot="{item,index}">
                                <bi-input  v-model="form.request[index]" placeholder="请输入请求参数的名称"  />
                            </bi-list>
                        </bi-form-item>
                    </bi-card>
                    
                </div>
                <div class="col-12" v-if="form.model_id">
                    <bi-card  >
                        <web-model-param ref="param" :model="form.model_id"  :data="param" ></web-model-param>
                    </bi-card>
                </div>
            </div>
        </bi-form>
     </div>
</div>


<script>
import webRoute from 'field/route.vue';
import webTemplate from 'field/template.vue';
import webModel from 'field/model.vue';
import webModelParam from 'field/model-param.vue';
let app =  admin.createApp({
    components:{
        webRoute,
        webTemplate,
        webModel,
        webModelParam
    },
    data(){
        let form = {
            page_id:'',
            title:'',
            route:"",
            route_type:'default',
            template:'',
            model_id:'',
            request:['']
        }
        let param = {};


        this.$assign(form, this.$pageData.page);
        if (this.$pageData.param) param = this.$pageData.param;

        return {
            form,
            param
        }
    },
    methods:{
        save(){
            if (this.$refs.form.check()){
                if (this.form.route_type=='root'){
                    if (this.form.route==''){
                        this.$alert('路由不能为空');
                        return ;
                    }
                }

                let param = {};

                if (this.$refs.param) param = this.$refs.param.getData();

                if (this.form.model_id=='' || this.$refs.param.check()){

                    this.$ajax({
                        url:this.$url({action:'save'}),
                        data:{
                            ...this.form,
                            param
                        },
                        success:(res)=>{
                          this.$go(-1);
                        }
                    });
                }
            }
        },

        addOption(){
            this.form.request.push('');
        },
        delOption(index){
            
            if (this.form.request.length<=1) return;
            this.form.request.splice(index,1);


        }
    }
}).mount('#app');

</script>